<#macro scriptMacro>
  <script>
    layui.use(['form', 'table'], function () {
      var $ = layui.jquery,
        form = layui.form,
        table = layui.table;

      table.render({
        treeColIndex: 1,
        treeSpid: -1,
        elem: '#routeListTable',
        where: {
          version: $('select[name=version]').val()
        },
        url: '${request.contextPath}/system/route/routeInfo',
        toolbar: '#topToolBar',
        treeIdName: 'id',
        treePidName: 'routeId',
        defaultToolbar: [],
        cols: [[
          {type: 'numbers', width: 80, title: '序号'},
          {field: 'id', width: 200, title: '路由ID'},
          {
            field: 'order',
            width: 100,
            title: '优先级'
          },
          {field: 'uri', width: 250, title: '转发路径'},
          {field: 'filters', width: 250, title: '过滤器', templet: '#filterTpl'},
          {field: 'predicates', width: 350, title: '断言', templet: '#predicatesTpl'},
          {title: '操作', minWidth: 150, toolbar: '#rightToolBar', align: "center"}
        ]],
        skin: 'line',
        parseData: function (res) {
          var data = res.data;
          if (data) {
            var routeDefinitions = data.routeDefinitions;
            $("#curVersion").val(data.version);
            return {
              "code": res.code,
              "msg": res.msg,
              "data": routeDefinitions
            }
          } else {
            return {
              "code": res.code,
              "msg": res.msg
            }
          }
        },
      });

      table.on('toolbar(routeListTableFilter)', function (obj) {
        var data = obj.data;
        if (obj.event === 'reload') {
          reloadTable();
        } else if (obj.event === 'add') {
          layer.open({
            type: 2,
            title: '添加路由',
            anim: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['600px', '700px'],
            content: '/system/route/add'
          });
        } else if (obj.event === 'use') {
          var curServerVersion = $("#curServerVersion").val();
          var curVersion = $('#curVersion').val();
          layer.confirm('您确定要使用此版本的配置么？您应用的版本号为【V' + curVersion + '】,当前运行中版本为 【V' + curServerVersion + '】', function (index) {
            $.post("${request.contextPath}/system/route/useConfig", {
              version: curVersion
            }, function (result) {
              layMsg(result.msg);
              if (result.success) {
                layer.close(index);
                window.location.reload();
              }
            })
          });
        } else if (obj.event === 'copy') {
          var curVersion = $("#curVersion").val();
          layer.confirm('您确定要复制此版本的配置么？被复制的版本为 【V' + curVersion + '】', function (index) {
            $.post("${request.contextPath}/system/route/copyConfig", {
              version: $('#curVersion').val()
            }, function (result) {
              layMsg(result.msg);
              if (result.success) {
                layer.close(index);
                layer.confirm(result.msg, function () {
                  window.location.reload();
                })
              }
            })
          });
        } else if (obj.event === 'update') {
          $.post("${request.contextPath}/system/route/manualUpdate", {}, function (result) {
            layer.confirm(result.msg, function () {
              if (result.success) {
                window.location.reload();
              }
            })
          })
        }
      });

      table.on('tool(routeListTableFilter)', function (obj) {
        var data = obj.data;
        if (obj.event === 'delete') {
          layer.confirm('确定删除此行路由配置吗？删除操作并不会影响网关的路由配置，只有在您应用此版本的配置之后才会生效。', function (index) {
            $.post('${request.contextPath}/system/route/delete', {
              version: $('#curVersion').val(),
              routeId: data.id
            }, function (result) {
              layMsg(result.msg);
              if (result.success) {
                layer.close(index);
                reloadTable();
              }
            })
          });
        } else if (obj.event === 'edit') {
          layer.open({
            type: 2,
            title: '修改路由',
            anim: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['600px', '700px'],
            content: '/system/route/update?id=' + data.id + '&version=' + $('#curVersion').val()
          });
          return false;
        }
      });

      form.on('select(versionSel)', function (data) {
        reloadTable();
      });
    });

    function reloadTable() {
      layui.use('table', function () {
        var $ = layui.jquery,
          table = layui.table;
        table.reload('routeListTable', {
          where: {
            version: $('select[name=version]').val()
          }
        }, true);
      })
    }
  </script>
</#macro>
<#macro styleMacro>
  <style>
    .layui-table-cell {
      height: auto;
    }
  </style>
</#macro>
<@zlt.page title="路由设置" scriptMacro=scriptMacro styleMacro=styleMacro>
  <body>
  <div class="layuimini-container">
    <div class="layuimini-main">
      <fieldset class="table-search-fieldset">
        <legend>搜索信息</legend>
        <form class="layui-form" style="margin: 10px 10px 10px 10px">
          <input type="hidden" id="curVersion">
          <input type="hidden" id="curServerVersion" value="${curServerVersion!0}" />
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">版本</label>
              <div class="layui-input-inline">
                <select name="version" lay-filter="versionSel">
                  <option value="">latest</option>
                    <#list versions as v>
                      <option value="${v}">V<small>${v}</small></option>
                    </#list>
                </select>
              </div>
            </div>
          </div>
        </form>
      </fieldset>

      <table class="layui-hide" id="routeListTable" lay-filter="routeListTableFilter"></table>

      <script type="text/html" id="topToolBar">
        <div class="layui-btn-container">
          <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="reload">重新载入</a>
          <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="copy" lay-tips="会在数据库新建一份一模一样的配置，但是版本号为最新版本+1，此操作并不会影响网关使用的路由配置版本号。"
             lay-tips-position="3" lay-time="5000">复制当前配置为新的配置</a>
          <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add">为当前配置新增路由</a>
          <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="use">设置网关路由配置为此版本</a>
          <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update"
             lay-tips="网关服务每隔30S会自动从redis中同步最新的路由配置信息，您也可以通过点击此按钮手动触发该事件"
             lay-tips-position="3" lay-time="5000">手动更新网关路由配置</a>
          <a class="layui-btn layui-btn-primary layui-btn-xs">当前服务器运行版本号：V${curServerVersion!0}</a>
        </div>
      </script>

      <script type="text/html" id="rightToolBar">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
      </script>

      <script type="text/html" id="filterTpl">
        {{# layui.each(d.filters, function(fI, f){ }}
        <span class="layui-badge layui-bg-unknown" style="padding-right: 0">
          {{ f.name }}
        {{# var ks = Object.keys(f.args); }}
        <span class="layui-badge layui-bg-created">参数:&nbsp;&nbsp;{{# layui.each(ks, function(kI, k){ }}{{k}}:{{ f.args[k] }}{{# }) }}</span>
        </span><br>
        {{# }) }}
      </script>

      <script type="text/html" id="predicatesTpl">
        {{# layui.each(d.predicates, function(fIndex, p){ }}
        <span class="layui-badge layui-bg-unknown" style="padding-right: 0">
          {{ p.name }}
        {{# var ks = Object.keys(p.args); }}
        <span class="layui-badge layui-bg-created">参数:&nbsp;&nbsp;{{# layui.each(ks, function(kI, k){ }}{{k}}&nbsp;:&nbsp;{{ p.args[k] }}{{# }) }}</span>
        </span><br>
        {{# }) }}
      </script>
    </div>
  </div>
  </body>
</@zlt.page>